<template>
    <TobeSelect @sure="sure" :maxPhotosAmout="vuex_templateData.modeArr.length || 1" isAddPhoto="true"></TobeSelect>
</template>
<script>
import TobeSelect from '../components/TobeSelect.vue';
export default {
    name: '',
    data() {
        return {};
    },
    onLoad() {},
    onShow() {},
    methods: {
        sure() {
            this.$u.route({
                type: 'back'
            });
        }
    },
    watch: {},
    components: { TobeSelect }
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    max-height: 100vh;
    .tabs-wrap {
        width: 100%;
        position: relative;
        flex-shrink: 0;
        &::after {
            position: absolute;
            content: '';
            left: 0;
            bottom: 4rpx;
            content: '';
            width: 750rpx;
            height: 2rpx;
            background: #e9eef3;
        }
    }
    .list-wrap {
        width: 100%;
        flex-grow: 9;
        padding: 30rpx 0 0 30rpx;
        box-sizing: border-box;
        display: flex;
        overflow-y: scroll;
        overflow-x: hidden;

        .list {
            align-items: flex-start;
            display: flex;
            flex-wrap: wrap;
            flex-shrink: 0;
            width: 100%;
            height: 240rpx;
            transition: all 0.5s ease;
            transform: translateX(0);
            .item {
                flex-shrink: 0;
                width: 210rpx;
                height: 140rpx;
                border-radius: 10rpx;
                margin: 0 30rpx 30rpx 0;
                position: relative;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }
                .select-circle {
                    position: absolute;
                    right: 10rpx;
                    top: 10rpx;
                    width: 32rpx;
                    height: 32rpx;
                    background-color: #000000;
                    border: solid 2rpx #ffffff;
                    box-sizing: border-box;
                    border-radius: 100%;
                    &::after {
                        position: absolute;
                        content: '';
                        left: 50%;
                        top: 50%;
                        width: 200%;
                        height: 200%;
                        transform: translate(-50%, -50%);
                    }
                }
                .selected {
                    background-image: linear-gradient(45deg, #6dc35a 0%, #7bcf6b 100%), linear-gradient(#000000, #000000);
                    box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(18, 28, 81, 0.05);
                    border: solid 2rpx #ffffff;
                    font-size: 22rpx;
                    color: #ffffff;
                    line-height: 22rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            .add-photo {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border-radius: 10rpx;
                border: dashed 2rpx #c4cad6;
                color: #c4cad6;
                font-size: 22rpx;
                line-height: 22rpx;
                image {
                    width: 44rpx;
                    height: 36rpx;
                    margin-bottom: 14rpx;
                }
            }
        }
        .move {
            transform: translateX(-100%);
        }
    }
    .bottom-wrap {
        width: 750rpx;
        flex-shrink: 0;
        background-color: #ffffff;
        box-shadow: 0rpx -6rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
        .default-box {
            color: #abb3b8;
            padding: 30rpx 18rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 26rpx;
            line-height: 26rpx;
            .btn {
                width: 200rpx;
                height: 66rpx;
                background-color: #d6d6d6;
                border-radius: 10rpx;
                font-size: 30rpx;
                color: #fff;
                line-height: 30rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .active {
                background-image: linear-gradient(45deg, #4dc450 0%, #5fd062 100%), linear-gradient(#31bd71, #31bd71);
            }
        }
        .select-photo-wrap {
            padding-bottom: 30rpx;
            width: 100%;
            box-sizing: border-box;
            border-bottom: 1rpx solid #e9eef3;
        }
    }
}
</style>
